// 审计整体整改情况
import { useRef, useEffect } from "react"

import createXYChart3D from "../../../utils/createXYChart3D"
import createPieChart3D from "../../../utils/createPieChart3D"

const AuditRectification = ({ data = {}, id }) => {
  const {
    auditRectificationData, // 列表
    problemTotalPieChart, // 问题总数-饼图
    problemCategoryBarChart // 问题分类-柱状图
  } = data

  // 整改情况
  const chartRef1 = useRef(null)
  const myChart1 = useRef(null)
  useEffect(() => {
    if (chartRef1.current) {
      if (!myChart1.current) {
        createPieChart3D(chartRef1, myChart1, problemTotalPieChart.data)
      }
    }
  }, [problemTotalPieChart])

  // 问题总览
  const chartRef2 = useRef(null)
  const myChart2 = useRef(null)
  useEffect(() => {
    if (chartRef2.current) {
      if (!myChart2.current) {
        createXYChart3D(chartRef2, myChart2, problemCategoryBarChart)
      }
    }
  }, [problemCategoryBarChart])

  return (
    <>
      {/* 标题 */}
      <div
        id={id}
        className="mt-[20px] h-[30px] flex items-center"
        style={{
          backgroundImage: `url('assistant-decision/title_bg.png')`,
          backgroundRepeat: "no-repeat"
        }}
      >
        <span className="ml-[56px] text-[16px] font-[700]">
          四、审计整体整改情况
        </span>
        <span className="ml-[36px] text-[12px]">
          以下展示的数据均来自数据中台，通过大模型提炼总结所得。
        </span>
      </div>
      <div className="text-[12px] h-[442px] mt-[20px] rounded-[8px] p-[10px] bg-[rgb(233,240,247)]">
        {/* 二级标题 */}
        <div className=" flex items-center justify-between">
          <div
            className="w-[365px] h-[36px] leading-[36px] "
            style={{
              backgroundImage: `url('assistant-decision/base-title_bg.png')`,
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover"
            }}
          >
            <span className="ml-[30px] text-white text-[16px] font-[600]">
              整改情况
            </span>
          </div>
          <div className="flex items-center">
            <div
              className="w-[20px] h-[20px] ml-[12px]"
              style={{
                backgroundImage: `url('assistant-decision/think_icon.png')`
              }}
            ></div>
            <div className="text-[#008BFF]">展开思考过程</div>
          </div>
        </div>
        <div className="flex items-center justify-between mt-[20px]">
          <div className="flex-1">
            <div ref={chartRef1} className=" h-[136px]"></div>
          </div>
          <div className="flex-1">
            <div className="flex items-center mb-[7px] pl-[10px] h-[40px] rounded-[4px] border-1 border-[#666]">
              问题总数 <span>{auditRectificationData.totalProblems}</span> 个
            </div>
            <div className="flex items-center mb-[7px] pl-[10px] h-[40px] rounded-[4px] border-1 border-[#666]">
              自审计 <span>{auditRectificationData.selfAuditCount}</span> 个
            </div>
            <div className="flex items-center pl-[10px] h-[40px] rounded-[4px] border-1 border-[#666]">
              被审计 <span>{auditRectificationData.externalAuditCount}</span> 个
            </div>
          </div>
        </div>
        <div
          className="mt-[13px] w-[139px] h-[26px] text-white text-center leading-[26px]"
          style={{
            backgroundImage: `url('assistant-decision/base-business-title_bg-1.png')`,
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover"
          }}
        >
          <span>问题总览</span>
        </div>
        {/* 图表 */}
        <div ref={chartRef2} className="w-full h-[220px]"></div>
      </div>
    </>
  )
}

export default AuditRectification
